<template>
  <view id="score">
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <view class="topbox">
      <image
        src="@/static/user/leftwhite.png"
        @click="backuser()"
        class="left"
        mode="widthFix"
      />
      <view class="topson">
        <view class="tsleft">
          <image :src="userInfo.avatar" class="qian" mode="widthFix" />
          <view class="qiantit">{{ userInfo.name }}</view>
        </view>
        <view class="tsright">
          <view class="rightlabel">签到规则</view>
        </view>
      </view>
      <view class="sign">
        <view class="signtit">当前积分</view>
        <view class="signscore">{{ score }}</view>
        <button class="signbut" @click="showsign()">签到</button>
      </view>
    </view>
    <view style="height: 18vh"></view>
    <view class="getdate">
      <getdate></getdate>
    </view>
    <!-- 弹出层 -->
    <u-popup mode="center" :round="10" :show="show" @close="close" @open="open">
      <view class="signmodel">
        <image src="@/static/user/signsuss.png" class="signsuss" mode="widthFix" />
        <view class="signtext">赠送的1积分已发到您的账户中<br />连续签到1天可额外获得1积分</view>
        <button class="konw" @click="closesign()">我知道了</button>
      </view>
    </u-popup>
    <!-- 弹出层 -->
  </view>
</template>


<script setup>
import { computed, reactive, ref } from "vue";
import { useStore } from "vuex";
import getdate from "@/components/getdate/getdate.vue";

const store = useStore();
const score = computed(() => store.state.userdata.score);
const userInfo = computed(() => store.state.userInfo);

// 弹出层
const show = ref(false);
const showsign = () => {
  show.value = true;
};
const closesign = () => {
  show.value = false;
};
const open = () => {
  show.value = true;
};
const close = () => {
  show.value = false;
};
// 弹出层

// 跳转
const backuser = () => {
  uni.navigateBack({
    delta: 1,
  });
};
</script>


<style lang="scss">
#score {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f0f8fa;
  .status_bar {
    height: var(--status-bar-height);
    width: 100%;
    background-color: #c4d234;
  }
  .topbox {
    width: 100%;
    height: 35vh;
    background-color: #c4d234;
    position: relative;
    .left {
      width: 50rpx;
      margin: 30rpx;
    }
    .topson {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 60rpx;
      .tsleft {
        display: flex;
        align-items: center;
        margin-left: 20rpx;
        .qian {
          width: 120rpx;
        }
        .qiantit {
          font-size: 32rpx;
          color: #fff;
          margin-left: 10rpx;
        }
        .qianscore {
          font-size: 0.8rem;
          margin-left: 10rpx;
          color: white;
          margin-top: 30rpx;
        }
        .rightbai {
          margin-left: 10rpx;
          margin-top: 30rpx;
          width: 20rpx;
        }
      }
      .tsright {
        display: flex;
        align-items: center;
        .rightlabel {
          display: inline-block;
          background-color: #cdd46a;
          font-size: 1rem;
          color: #fff;
          padding: 10rpx;
          padding-left: 30rpx;
          border-top-left-radius: 30rpx;
          border-bottom-left-radius: 30rpx;
          box-sizing: border-box;
        }
      }
    }
    .sign {
      position: absolute;
      width: 94%;
      aspect-ratio: 2;
      background-color: #fff;
      top: 45%;
      left: 50%;
      transform: translate(-50%, 50%);
      border-radius: 16rpx;
      box-shadow: #b3b8be 0rpx 0rpx 10rpx;
      padding: 30rpx;
      box-sizing: border-box;
      text-align: center;
      .signtit {
        margin-top: 20rpx;
      }
      .signscore {
        font-size: 50rpx;
        font-weight: bold;
        margin: 40rpx 0;
      }
      .signbut {
        width: 70%;
        margin-top: 15rpx;
        border-radius: 50rpx;
        color: white;
        background-color: #c4d234;
      }
    }
  }
  .getdate {
    width: 94%;
    margin: auto;
  }
  .signmodel{
    width: 94vw;
    aspect-ratio: 1.6;
    background-color: #fff;
    border-radius: 16rpx;
    position: relative;
    text-align: center;
    .signsuss{
      width:30%;
      border-radius: 16rpx;
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .signtext{
      margin-top: 23%;
      font-size: 25rpx;
    }
    .konw{
      width: 80%;
      color: #fff;
      background-color: #ADB838;
      border-radius: 50rpx;
      margin-top: 10%;
    }
  }
}
</style>
